<template>
  <!-- 头部导航栏 -->
  <div class="header-nav" v-if="!$store.state.examing">
    <div class="logo">
      <img src="@/assets/logo.png" alt="" />
    </div>
    <!-- 导航列表 -->
    <div class="menu">
      <el-menu
        router
        class="el-menu-demo"
        mode="horizontal"
        background-color="#494951"
        text-color="#fff"
        active-text-color="#ff6700"
      >
        <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
          {{ item.navItem }}
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 头像 -->
    <el-avatar
      class="avatar"
      shape="circle"
      :src="avatar"
      :size="30"
      :class="'bar-fixed'"
    >
    </el-avatar>
    <!-- 提示框 -->
    <span class="user-tip">西门</span>

    <!-- 用户状态栏 -->
    <MenuBar related="bar-fixed" @click="onClick">
      <MenuBarItem
        icon="el-icon-circle-close"
        text="退出"
        :index="3"
        @click="quitSystem"
      />
    </MenuBar>
  </div>
</template>

<script>
import avatar from "@/assets/logo.png";
import MenuBar from "../header/MenuBar.vue";
import MenuBarItem from "../header/MenuBarItem.vue";

export default {
  name: "HeaderNav",
  components: {
    MenuBar,
    MenuBarItem,
  },
  data() {
    return {
      userName: "",
      avatar,
      identifyShow: sessionStorage.getItem("identify"),
      navList: [],
    };
  },

  mounted() {
    this.userName = sessionStorage.getItem("userName");
    this.flag = sessionStorage.getItem("flag");
    this.navList = JSON.parse(sessionStorage.getItem("navList"));

    console.log(this.navList);
  },

  methods: {
    onClick(a, b, c) {
      console.log(a, b, c);
    },

    quitSystem() {
      this.$router.push({name:'home'})
      serveQuitSystem().then((res) => {
        console.log(res);
        const { ok } = res;
        if (ok) {
          sessionStorage.removeItem("token");
          sessionStorage.removeItem("userName");
          this.$router.replace("/login");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-header {
  padding: 0 !important;
}
.header-nav {
  flex: 1;
  min-width: 870px;
  min-height: 30px;
  width: 100%;
  height: 61px;
  background-color: #494951;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  a {
    text-decoration: none;
    color: inherit;
  }

  .logo {
    margin-left: 15%;
    @media screen and (max-width: 1060px) {
      margin-left: 10%;
    }

    @media screen and (max-width: 870px) {
      margin-left: 1%;
    }

    height: 100%;
    width: 12%;
    min-width: 150px;
    margin-right: 10px;
    display: flex;
    align-items: center;

    img {
      width: 100%;
      height: 80%;
      margin-top: -5px;
    }

    & > :nth-child(2) {
      padding-top: 5px;
      margin-left: 10px;
      color: #fff;
      font-size: 16px;
    }
  }

  .menu {
    height: 61px;
    display: flex;
    align-items: center;
    margin-right: 3vw;

    & > * {
      margin-left: 10px;
      height: 61px;
      display: flex;
      min-width: 85px;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
      color: inherit;
    }

    .iconfont {
      margin-right: 10px;
    }
  }

  .avatar {
    margin-left: auto;
    margin-right: 10px;
    min-width: 30px;
    border: solid 0.1px rgba($color: #fff, $alpha: 0.1);
    & {
      transition: 0.5s;
    }

    &:hover {
      transform: scale(1.2);
    }
  }

  .user-tip {
    width: 50px;
    margin-right: 15vw;
    @media screen and (max-width: 870px) {
      margin-right: 0;
    }
    // min-width: 100px;
    color: #fff;
  }
}
</style>
